import React, { PureComponent } from 'react';
import {  View, Text ,TouchableOpacity,Image,StyleSheet} from 'react-native';
import NavigationItem from '../../widget/NavigationItem'
import color from '../../widget/color'
import {Heading1,Heading2,Paragraph} from '../../widget/Text'
import screen from '../../common/screen'
import Button from '../../widget/Button'
import Separator from '../../widget/Separator'



export default class componentName extends PureComponent {
     static navigationOptions = ({navigation}) => ({
        headerTitle: "团购详情",
        
        headerRight: (
            <NavigationItem
                icon={require('../../img/public/icon_navigationItem_share.png')}
                onPress={() => {
                    
                }}
            />
        ),
        
    })
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
      let { info}  = this.props.navigation.state.params;
      let imageUrl = info.imageUrl.replace('w.h','480.0') ;
    return (
      <View style={styles.container}>
            <View >
                <Image style={styles.banner}  source={{uri:imageUrl}}/> 
                <View style={styles.topContainer}>
                    <Heading2 style={{color:color.primary}}>￥</Heading2>
                    <Heading1 style={{marginBottom: -8,}}>{info.price}</Heading1>
                    <Paragraph style={{marginLeft: 10,}}>门市价:￥{(info.price*1.1).toFixed(0)}</Paragraph>
                    <View style={{flex:1}}  />
                     <Button   
                        title='立即抢购'
                        titleStyle={{color:'white',fontSize:18}}
                        style={styles.buyButton}
                    />
                    
                </View>
            </View>
           <Separator />
            <View style={styles.tagContainer}>
                <View style={{flexDirection:'row'}}>
                <Image 
                source={require('../../img/home/icon_deal_anytime_refund.png')} 
                style={{width:20,height:20}}
                    />
                <Paragraph style={{color:'#89B24F',marginLeft: 10,}}>随时退</Paragraph>
                </View>
                <View >
                <Paragraph >已售123</Paragraph>
                </View>
            </View>
      </View>
    );
  }
}

const styles  = StyleSheet.create({
        container:{
            flex:1,
            backgroundColor: 'white',
        },
        banner:{
            width:screen.width,
            height:screen.width/2,
           
        },
        topContainer:{
            padding: 10,
            flexDirection: 'row',
            alignItems: 'flex-end',
        },
        tagContainer:{
            justifyContent: 'space-between',
            flexDirection:'row',
            alignItems:'center',
            padding:10

        },
        flex:{
            flex:1
        },
        buyButton:{
            backgroundColor: "#fc9e28",
            width:94,
            height:36,
            borderRadius: 5,
        }
})